<template>
  <div class="domainsManagement">
    <MetaPageTable
      ref="domainsManagementTable"
      class="domainsManagement_table"
      table-title="配置列表"
      tableHeight="680"
      :need-checkbox="false"
      :is-auto-req="false"
      :tableData="domainsData"
      :display-item="displayItem"
      :btn-group="btnGroup"
      :line-btn-group="lineBtnGroup"
      @btnClick="tableBtnClick"
      @lineBtnClick="tableInlineBtnClick"
    />
    <el-dialog
      v-if="domainsEditDialogFlag"
      :title="itemEditData.id && itemEditData.id !== '' ? '编辑配置' : '新建配置'"
      :visible.sync="domainsEditDialogFlag"
      width="50%"
      modal
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false">
      <el-form ref="domainsInfo_form" :model="itemEditData" label-width="110px" :rules="domainsInfoRules">
        <el-form-item label="字典名称" prop="domainName">
          <el-input v-model="itemEditData.domainName" placeholder="请输入字典名称"></el-input>
        </el-form-item>
        <el-form-item label="键" prop="key">
          <el-input v-model="itemEditData.key" placeholder="请输入键"></el-input>
        </el-form-item>
        <el-form-item label="值" prop="value">
          <el-input v-model="itemEditData.value" placeholder="请输入值"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="itemEditData.sort" placeholder="请输入排序"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialogFooter">
        <el-button size="mini" @click="newDialogClose()">取消</el-button>
        <el-button
          type="primary"
          size="mini"
          @click="newDialogSubmit()"
        >保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import deepClone from '../utils/deepClone'
import MetaPageTable from '../components/MetaPageTable'
import { isTel } from '../utils/validate'
export default {
  name: 'domainsManagement',
  components: {
    MetaPageTable
  },
  data () {
    var checkName = (rule, value, callback) => {
      if (value.trim() === '') {
        return callback(new Error('请输入配置名称'))
      }else{
        return callback()
      }
    }
    var checkPhone = (rule, value, callback) => {
      if (value === '') {
        return callback()
      } else if (!isTel(value)) {
        return callback(new Error('请正确填写联系电话'))
      } else {
        return callback()
      }
    }
    return {
      domainsEditDialogFlag: false,
      domainsData: {},
      searchDataForTable: {},
      itemEditData: {
        domainName: '',
        key: '',
        value: '',
        sort: ''
      },
      displayItem: [
        {
          label: '序号',
          prop: 'id'
        }, {
          label: '字典项名称',
          prop: 'domainName'
        }, {
          label: '键',
          prop: 'key'
        }, {
          label: '值',
          prop: 'value'
        }, {
          label: '排序',
          prop: 'sort'
        }, {
          label: '创建人',
          prop: 'createUser'
        }, {
          label: '创建时间',
          prop: 'createDate'
        }
      ],
      btnGroup: [{
        id: 'new',
        title: '新建'
      }],
      lineBtnGroup: [
        {
          id: 'edit',
          title: '编辑',
        }
      ],
      domainsInfoRules: {
        domainName: [
          { required: true, message: '请输入字典名称', trigger: 'change' },
        ],
        key: [
          { required: true, message: '请输入键', trigger: 'change' },
        ],
        value: [
          { required: true, message: '请输入值', trigger: 'change' },
        ],
        sort: [
          { required: true, message: '请输入排序', trigger: 'change' },
        ]
      },
      provinceList: [],
      cityList: [],
      areaList: []
    }
  },
  mounted() {
    this.initDomainsData(true)
  },
  methods: {
    initDomainsData(reflash) {
      let sData = {}
      sData = this.searchDataForTable
      sData.page = 1
      sData.limit = 99999999
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + 'domains/list',
        method: "post",
        data: sData
      }).then(res => {
        if (res.data.code === 200) {
          this.domainsData = res.data.result
          if(this.domainsData.content) {
            for(let i in this.domainsData.content) {
              let addr = ''
              for(let j in this.domainsData.content[i].areaCodes) {
                addr += this.domainsData.content[i].areaCodes[j].name
              }
              if(this.domainsData.content[i].address && this.domainsData.content[i].address !== '') {
                addr += this.domainsData.content[i].address
              }
              this.domainsData.content[i].addr = addr
            }
          }
          this.$nextTick(() => {
            this.$refs.domainsManagementTable.formDataInit(reflash)
          })
        }else {
          this.$notify.error({
            title: '错误',
            message: res.data.message
          });
        }
      })
    },
    tableBtnClick(item) {
      if (item.button === 'new') {
        this.itemEditData = {
          id: '',
          domainName: '',
          key: '',
          value: '',
          sort: ''
        }
        this.domainsEditDialogFlag = true
      }
    },
    tableInlineBtnClick(item) {
      if (item.button === 'edit') {
        // 省市区
        this.itemEditData = {
          id: item.rows.id,
          domainName: item.rows.domainName,
          key: item.rows.key,
          value: item.rows.value,
          sort: item.rows.sort
        }
        this.domainsEditDialogFlag = true
      }
    },
    newDialogClose() {
      this.itemEditData = {
        id: '',
        domainName: '',
        key: '',
        value: '',
        sort: ''
      }
      this.domainsEditDialogFlag = false
    },
    newDialogSubmit() {
      this.$refs['domainsInfo_form'].validate((valid) => {
        if (valid) {
          let params = {}
          if(this.itemEditData.id && this.itemEditData.id !== '') {
            params.id = this.itemEditData.id
            params.domainName = this.itemEditData.domainName
            params.key = this.itemEditData.key
            params.value = this.itemEditData.value
            params.sort = this.itemEditData.sort
          }else {
            params.domainName = this.itemEditData.domainName
            params.key = this.itemEditData.key
            params.value = this.itemEditData.value
            params.sort = this.itemEditData.sort
          }
          this.$fetch({
            url: process.env.PROGOO_GATE_WATER + "domains/edit",
            method: "post",
            data: params
          }).then(res => {
            if (res.data.code === 200) {
              this.initDomainsData(false)
              this.newDialogClose()
            }else {
              this.$notify.error({
                title: '错误',
                message: res.data.message
              });
            }
          })
        } else {
          return false;
        }
      });
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.domainsManagement{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 15px;
  overflow-y: scroll;
  .domainsManagement_table {
    width: 100%;
    overflow-y: unset;
  }
  .domainsInfo_provinceCityCascader {
    width: 100%;
  }
  .dialogFooter {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
  }
}
</style>
